<template>
    <div :class="[`vp-label`, `text-align--${align}`]" >
        <div :class="[`line-cn--${currentSize}`]">{{ zh }}</div>
        <div :class="[`line-en--${currentSize}`]">{{ en }}</div>
    </div>
</template>

<script setup lang="ts" name="vpLabel">
    import { useGlobalConfig } from 'element-plus';
    import { computed } from 'vue';

    interface Props {
        zh: string // 没有 ? 表示必需
        en: string // 没有 ? 表示必需
        align?: 'left' | 'center' | 'right'
        size?: 'small' | 'default' | 'large'
    }
    const props = defineProps<Props>();

    const globalConfig = useGlobalConfig();
    const currentSize = computed(() => props.size || globalConfig.value.size || 'default');

</script>

<style scoped lang="scss">
.text-align--left {
    text-align: left;
}
.text-align--center {
    text-align: center;
}
.text-align--right {
    text-align: right;
}
.vp-label {
    display:inline-table;
    // flex-direction: column;
    vertical-align: middle;
    // gap: 0px; 
}
.line-cn--default {
    // width: 100%;
    font-size: 14px;
    line-height: 14px;
}
.line-en--default {
    // width: 100%;
    font-size: 12px;
    line-height: 12px;
}

.line-cn--large {
    // width: 100%;
    font-size: 14px;
    line-height: 14px;
}
.line-en--large {
    // width: 100%;
    font-size: 12px;
    line-height: 12px;
}

.line-cn--small {
    // width: 100%;
    font-size: 12px;
    line-height: 12px;
}
.line-en--small {
    // width: 100%;
    font-size: 10px;
    line-height: 10px;
}
</style>